<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件修饰符</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            #button1{
                margin-top : 10px;
                height: 30px;
                width: 50px;
                margin-left: 10px;
            }

            .div1{
                height: 70px;
                background-color: cadetblue;
                text-align: center;
                padding: 10px 0px;
            }

            .div2{
                height: 20px;
                margin: 10px auto;
                width: 400px;
                background-color: chocolate;
            }

            .demo{
                height: 60px;
                background-color: aquamarine;
                margin-top: 20px;
            }

            .button1{
                margin: 10px 10px;
            }

            .list{
                background-color: coral;
                height: 200px;
                width: 300px;
                overflow: auto;
            }

            li{
                border-color: black;
                height: 100px;
            }
            
        </style>
    </head>

    <body>
        <!-- root容器 -->
        <div id="root">
            <h1>"欢迎来到{{name}}学习"</h1>
            <div class="div1" v-on:click.capture = test1>
                 div1
                <div class="div2" v-on:click = test2>div2</div>
            </div>

            <div class="demo" v-on:click.self = "showMessage1">
                <button class="button1" v-on:click = "showMessage2">点我提示信息</button>
            </div>

            <div class="test3">
                <ul v-on:wheel.passive = demo class="list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>

        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'一心堂'
                },
                methods: {
                  showInfo1(event){        
                    alert("我是内部的button元素...")
                  },

                  test1(){
                    console.log(1)
                  },
                  test2(){
                    console.log(2)
                  },
                  showMessage1(e){
                    console.log(e.target)
                  },
                  showMessage2(e){
                    console.log(e.target)
                  },
                  demo(){
                    for (let id = 0; id < 100000; id++) {
                        console.log("路飞无敌!");
                    }
                    
                  }
                }
            })
        </script>
    </body>
</html>